<style lang="scss" scoped>
::v-deep .radio1 .el-radio {
  width: 50px;
  margin-left: 0;
  line-height: 24px;
}
</style>

<template>
    <div style="padding-left:80px">
        <el-form :model="queryForm" label-width="130px" :rules="rules" ref="addform">
            <el-row :getter="24">
                <el-col :span="8">
                    <el-form-item :label="$t('题库名称：')" prop="questionPoolName">
                        <el-input
                            disabled
                            v-model="queryForm.questionPoolName"
                            maxlength="32"
                            :placeholder="$t('请输入')"
                        ></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item :label="$t('试题代码：')" prop="questionCode">
                        <el-input
                            v-model="queryForm.questionCode"
                            maxlength="32"
                            :placeholder="$t('请输入')"
                        ></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item :label="$t('题目类型：')" prop="questionType">
                        <el-select disabled v-model="queryForm.questionType" style="width: 100%">
                            <el-option :label="$t('单选题')" :value="1"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :getter="24">
                <el-col :span="24">
                    <el-form-item :label="$t('试题名称：')" prop="questionName">
                        <el-input
                            type="textarea"
                            v-model="queryForm.questionName"
                            :maxlength="500"
                            :rows="7"
                            show-word-limit
                            clearable
                        ></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :getter="24">
                <el-col :span="24">
                    <el-form-item label="选项设置:" prop="answer">
                        <span>参考答案：</span>
                        <el-radio-group class="radio1" v-model="queryForm.answer">
                            <el-radio
                                :label="item.label"
                                v-for="item in radios"
                                v-show="item.status"
                                :disabled="!item.status"
                                :key="item.key"
                            >
                                {{ item.label }}
                            </el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :getter="24">
                <el-col :span="12">
                    <el-form-item
                        v-for="(domain, index) in queryForm.answerList"
                        :label="domain.label"
                        :key="domain.key"
                        :prop="'answerList.' + index + '.value'"
                        :rules="[{ required: true, message: '请输入选项内容', trigger: 'change' }]"
                    >
                        <el-input v-model="domain.value" :maxlength="32"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-button type="primary" @click="exportAdd">{{ $t('新增选项') }}</el-button>
                <el-button type="primary" @click.prevent="removeDomain()">
                    删除选项
                </el-button>
            </el-row>
        </el-form>

        <el-row type="flex" class="row-bg" justify="end">
            <el-button @click="cancelDialog">{{ $t('overseasInstitutions.cancel') }}</el-button>
            <el-button type="primary" @click="conserve">
                {{ $t('overseasInstitutions.save') }}
            </el-button>
        </el-row>
    </div>
</template>

<script>
import { queryDic } from 'common/src/api/dictionary'
import UTILS from 'common/src/utils/utils'
import graduateStudent from 'common/src/api/graduateStudent/graduateStudent'
import interAcaConference from 'common/src/api/internationalCommunication/interAcaConference'
import forumProject from 'common/src/api/academicForums/forumProject'

export default {
    props: {
        dataList: {
            type: String
        },
        dataProp: {
            type: String
        },
        dataListProp: {
            type: Object
        },
        dataQueryForm: {
            type: Object
        },
        dataQuery: {
            type: Object
        },
        showFlag: {
            type: Boolean
        },
        agent: {
            type: Boolean,
            default: false,
            required: false
        },
        admin: {
            type: Boolean,
            default: false,
            required: false
        }
    },
    data() {
        return {
            list: [
                'A',
                'B',
                'C',
                'D',
                'E',
                'F',
                'G',
                'H',
                'I',
                'J',
                'K',
                'L',
                'M',
                'N',
                'O',
                'P',
                'Q',
                'R',
                'S',
                'T',
                'U',
                'V',
                'W',
                'X',
                'Y',
                'Z'
            ],
            radios: [
                { label: 'A', key: '0', status: true },
                { label: 'B', key: '1', status: true },
                // { label: 'C', key: '2', status: true },
                // { label: 'D', key: '3', status: true }
            ],
            multipleSelection: [],
            dataList: [],
            fileList: [],
            queryForm: {
                questionPoolId: this.dataQuery.questionPoolId,
                questionCode: '',
                questionType: 1,
                questionPoolName: this.dataQuery.questionPoolName,
                answer: '',
                answerList: [
                    {
                        label: 'A',
                        key: '0',
                        status: false
                    },
                    {
                        label: 'B',
                        key: '1',
                        status: false
                    },
                    // {
                    //     label: 'C',
                    //     key: '2',
                    //     status: false
                    // },
                    // {
                    //     label: 'D',
                    //     key: '3',
                    //     status: false
                    // }
                ]
            },
            innerVisible: false,
            id: '',
            restaurants: [],
            formsLearn: [],
            options: {
                facultys: [],
                timeList: [],
                title: [],
                nationId: [],
                regionList: []
            },
            radio: 1,
            rules: {
                questionPoolName: [
                    {
                        required: true,
                        message: this.$t('请输入题库名称'),
                        trigger: 'change'
                    }
                ],
                questionCode: [
                    {
                        required: true,
                        message: this.$t('请输入试题代码'),
                        trigger: 'change'
                    }
                ],
                questionType: [
                    {
                        required: true,
                        message: this.$t('请选择题目类型'),
                        trigger: 'change'
                    }
                ],
                questionName: [
                    {
                        required: true,
                        message: this.$t('请输入试题名称'),
                        trigger: 'change'
                    }
                    // { validator: this.checkSpecial, trigger: 'blur'}
                ],
                answer: [
                    {
                        required: true,
                        message: this.$t('请选择参考答案'),
                        trigger: 'change'
                    }
                ]
                // answerList: [
                //     {
                //         required: true,
                //         message: this.$t('请输入选项内容'),
                //         trigger: 'change'
                //     }
                // ]
            }
        }
    },
    watch: {
        dataListProp: {
            handler: function(newV, oldV) {
                // this.queryForm.questionCode = ''
                // this.queryForm.questionName = ''
                this.radios = [
                    { label: 'A', key: '0', status: true },
                    { label: 'B', key: '1', status: true },
                    // { label: 'C', key: '2', status: true },
                    // { label: 'D', key: '3', status: true }
                ]
                this.queryForm.answerList = [
                    {
                        label: 'A',
                        key: '0',
                        status: false
                    },
                    {
                        label: 'B',
                        key: '1',
                        status: false
                    },
                    // {
                    //     label: 'C',
                    //     key: '2',
                    //     status: false
                    // },
                    // {
                    //     label: 'D',
                    //     key: '3',
                    //     status: false
                    // }
                ]
            },
            deep: true,
            immediate: true
        }
    },
    created() {},
    mounted() {},
    methods: {
        // 过滤$符号
        checkSpecial(rule, value, callback) {
            let regEn = /[`$]/im
            if (regEn.test(value)) {
                return callback(new Error(this.$t('identificationToDoList.cannotContain')))
            } else if (value === '') {
                return callback()
            } else {
                return callback()
            }
        },
        // 新增选项
        exportAdd() {
            if (this.radios.length < 26) {
                this.radios.push({
                    label: this.list[this.radios.length],
                    key: this.radios.length,
                    status: true
                })
            } else {
                this.$message({ type: 'error', message: this.$t('最多支持26个选项') })
            }

            if (this.queryForm.answerList.length < 26) {
                this.queryForm.answerList.push({
                    label: this.list[this.radios.length - 1],
                    key: this.radios.length,
                    status: true
                })
            } else {
                this.$message({ type: 'error', message: this.$t('最多支持26个选项') })
            }
        },
        // 删除选项
        removeDomain(item) {
            if (this.queryForm.answerList.length > 2 && this.radios.length > 2) {
                this.queryForm.answerList.splice(-1, 1)
                this.radios.splice(-1, 1)
            } else if ((this.queryForm.answerList.length = 2)) {
                this.$message({
                    type: 'error',
                    message: this.$t('试题至少需要2个选项')
                })
            }
        },

        // 内层弹出确定
        confirmInner() {
            this.dataListProp = {}
            this.$refs['addform'].resetFields()
            this.innerVisible = false
            this.$emit('cancel-dialog', false)
        },
        // 内层弹出取消
        cancelInner() {
            this.innerVisible = false
        },
        // 内层弹出保存关闭
        confirmAndClose() {
            this.innerVisible = false
            this.conserve()
        },
        // 取消
        cancelDialog() {
            this.$refs['addform'].resetFields()
            this.$emit('cancel-dialog', false)
        },

        handleSelectionChange(val) {
            this.multipleSelection = val
        },

        // 保存
        conserve() {
            this.$refs['addform'].validate(valid => {
                if (valid) {
                    this.queryForm.answerList = this.queryForm.answerList.map(item => {
                        item.optionCode = item.label
                        item.optionContent = item.value
                        return item
                    })
                    this.$emit('affirm-form', this.queryForm, this.dataQueryForm)
                }
            })
        }
    }
}
</script>
